<template>
    <div>
        <van-nav-bar title="标题" />
        <van-search v-model="value" show-action label="地址" placeholder="请输入搜索关键词" @search="onSearch">
            <template #action>
                <div @click="onClickButton">搜索</div>
            </template>
        </van-search>
        <van-swipe :autoplay="1000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" style="width: 100%;height: 100px;" />
            </van-swipe-item>
        </van-swipe>
        <van-grid :column-num="4">
            <van-grid-item v-for="item in wgq" :key="value" :icon="item.image_src" :text="item.name" />
        </van-grid>
        <div v-for="item in wgq1">
            <img :src="item.floor_title.image_src" alt="" style="width: 100%;">
            <div v-for="items in item.product_list">
                <img :src="items.image_src" alt="" style="width: 100px;height: 100px;float: left;margin: 10px;">
            </div>
        </div>
    </div>
</template>

<script setup>
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
];
import {ref}from 'vue'
import {catitemsApi}from '@/api/api'
import router from '@/router'
let wgq=ref([])
catitemsApi().then(res=>{
    console.log('导航',res)
    wgq.value=res.data.message
})
import {floordataApi}from '@/api/api'
let wgq1=ref([])
floordataApi().then(res=>{
    console.log('楼层',res)
    wgq1.value=res.data.message
})


let onClickButton=()=>{
    router.push('/ss')
}
</script>

<style lang="scss" scoped></style>